<template>
    <splitpanes horizontal>
        <pane size="50">
            <div class="layout-padding-auto layout-padding-view">
                <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" style="width: 100%;height: 100%" stripe
                    :header-cell-style="tableStyle.headerCellStyle" @row-click="clickRow" >
                    <el-table-column type="index" label="#" width="50" />
                    <el-table-column prop="id" label="Id" width="75"/>
                    <el-table-column prop="jobId" label="JobId" width="72"/>
                    <el-table-column prop="jobCompleteStatus" :label="$t('edijob.jobStatus')" width="85">
                        <template #default="scope">
                                <!--根据不同的状态选择不同的颜色的tag-->
                                <el-tag size="large" :type="scope.row.jobCompleteStatus === 'Y' ? 'success' : 'danger'">
                                {{ scope.row.jobCompleteStatus === 'Y' ? $t('edijob.success') : $t('edijob.notSubmit')}}
                                </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="errorMsgbtn" :label="$t('edijob.errorMsg')"  width="115">
                        <template #default="scope">
                            <el-check-tag checked type="warning" @click.stop="clickErrormsg(scope.row.errorMsg)" v-if="scope.row.errorMsg?.trim().length > 0">{{$t('edijob.errorJson')}}</el-check-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="jsonbtn" :label="$t('edijob.json')"  width="115">
                        <template #default="scope">
                            <el-check-tag checked type="" @click.stop="clickJson(scope.row.attribute3)" v-if="scope.row.attribute3?.trim().length > 0">{{$t('edijob.json')}}</el-check-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="businessDate" :label="$t('edijob.businessDate')" width="200" clearable = false>
                        <template #default="scope">
                            <div class="editable-cell" @click="handleDateClick(scope.row)">
                                    <!-- 编辑模式 -->
                                    <el-date-picker
                                    v-if=" editingId === scope.row.id && state.queryForm.jobCode === 'CompleteReport'"
                                    :clearable="false"
                                    v-model="scope.row.businessDate"
                                    type="datetime"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    :ref="(el) => setDatePickerRef(el, scope.row.id)"
                                    @blur="handleBlur(scope.row)"
                                    @change="handleChange(scope.row)"
                                    @keyup.enter="handleChange(scope.row)"
                                    style="width: 180px;"
                                />
                                <!-- 显示模式 -->
                                <span v-else >{{ scope.row.businessDate }}</span>
                            </div>  
                        </template>
                    </el-table-column>
                    <el-table-column prop="docName" :label="$t('edijob.docName')"  width="140"/>
                    <el-table-column prop="optName" :label="$t('edijob.optName')"  width="82"/>
                    <el-table-column prop="jobSequence" :label="$t('edijob.jobSequence')" width="83">
                        <template #default="scope">
                                <!--根据不同的状态选择不同的颜色的tag-->
                                <el-tag size="large" :type="''" style="color: black;">
                                {{ scope.row.jobSequence }}
                                </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="executeTimes" :label="$t('edijob.executeTimes')" width="85"/>
                    <el-table-column prop="erpDocNo" :label="$t('edijob.erpDocNo')" width="190"/>
                    <el-table-column prop="docNo" :label="$t('edijob.docNo')" width="120"/>
                    <el-table-column prop="mo" :label="$t('edijob.mo')" width="140"/>
                    <el-table-column prop="pcsQty" :label="$t('edijob.pcsQty')" width="80"/>
                    <el-table-column prop="qty" :label="$t('edijob.qty')" width="90"/>
                    <el-table-column prop="bomVersion" :label="$t('edijob.bomVersion')" width="150"/>
                    <el-table-column prop="deptCode" :label="$t('edijob.deptCode')" width="115"/>
                </el-table>
                <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                    v-bind="state.pagination" />
                </div>
        </pane>
        <pane size="50">
            <div class="layout-padding-auto layout-padding-view">
                <jobDetailSrc ref="jobDetailSrcRef" @getChildren="oncFun"></jobDetailSrc>
            </div>
        </pane>
    </splitpanes>
    <jsonForm ref="jsonFormDialogRef" />
</template>


<script setup lang="ts">
//  table hook
import {BasicTableProps, useTable} from "/@/hooks/table";
import { getJobdetailByJobId, updateJobDBusindate } from "/@/api/platform/edi/job";
import jobDetailSrc from "/@/views/edi/job/jobDetailSrc.vue"
import {useI18n} from 'vue-i18n';
import { useMessage } from "/@/hooks/message";
const {t} = useI18n();
const jobDetailSrcRef = ref();
const jsonForm = defineAsyncComponent(() => import('./jsonForm.vue'));
const jsonFormDialogRef = ref()
const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getJobdetailByJobId
})

// 响应式状态
const editingId = ref(null)
const originalDate = ref('')
const datePickerRefs = ref({})
// 设置日期选择器引用
const setDatePickerRef = (el, id) => {
  if (el) datePickerRefs.value[id] = el
}
// 处理单元格点击
const handleDateClick = async (row) => {
  if (state.queryForm.jobCode !== 'CompleteReport') return
  if (editingId.value !== null) return
  
  editingId.value = row.id
  originalDate.value = row.businessDate
  
  await nextTick()
  const picker = datePickerRefs.value[row.id]
  picker?.focus()
}
// 处理日期变更
const handleChange = async (row) => {
  if (row.businessDate !== originalDate.value) {
    await saveDate(row)
  }
  editingId.value = null
}
// 处理失焦事件
const handleBlur = async (row) => {
  if (row.businessDate !== originalDate.value) {
    await saveDate(row)
  }
  editingId.value = null
}

// 保存到接口
const saveDate = async (row) => {
  try {
    // 调用你的API接口
    await updateJobDBusindate({
      jobId: row.jobId,
      businessDate: row.businessDate
    })
    
    useMessage().success('修改成功')
    // 可选：触发数据刷新
    getDataList();
  } catch (error) {
    // 回滚数据
    row.businessDate = originalDate.value
    useMessage().error(`修改失败`)
  }
}

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

// 刷新表格
const refresh = (row: any) => {
    state.queryForm.jobid = row.id
    state.queryForm.jobCode = row.jobCode
    getDataList()
}

// 点击行的时候触发
const clickRow = (row: any) => {
    row.jobCode = state.queryForm.jobCode
    jobDetailSrcRef.value.refresh(row)
}

const clickErrormsg = (errorMsg: any) =>{
    jsonFormDialogRef.value.openDialog(errorMsg)
}

const clickJson = (errorMsg: any) =>{
    jsonFormDialogRef.value.openDialog(errorMsg)
}

const oncFun = () => {
    getDataList(false)
}

// 暴露变量
defineExpose({
    refresh
});

</script>